<template>
  <el-scrollbar class="scroll-page">
    <div style="padding: 0 40px;">
      <Banner />
      <div
        style="min-height: 300px;"
        v-loading="loading"
        element-loading-spinner="el-icon-loading"
        element-loading-text="加载中"
        element-loading-background="rgba(0, 0, 0, 0)"
      >
        <p class="mt-0">推荐歌单</p>
        <el-divider class="mt-2"></el-divider>
        <MusicCard @click="click(item)" v-for="item in perosnalized" :key="item.id" :music="item" />
        <div v-if="loadingErr" class="text-center">
          <el-button @click="getPersonalized">加载失败，请重试</el-button>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script>
import Banner from './Banner'
import { personalized } from '@/api/index'
import MusicCard from '@/components/MusicCard/one'
export default {
  components: {
    Banner,
    MusicCard
  },
  data() {
    return {
      loading: false,
      loadingErr: false,
      perosnalized: []
    }
  },
  created() {
    this.getPersonalized()
  },
  computed: {
    playlist: {
      get() {
        return this.$store.state.player.list
      },
      set(val) {
        this.$store.commit('SET_PLAYER_DATA', { list: val })
      }
    }
  },
  methods: {
    // 获取推荐歌单
    getPersonalized() {
      this.loading = true
      this.loadingErr = false
      personalized()
        .then(res => {
          console.log('个性化 res: ', res)
          this.perosnalized = res.result
          // if (!this.playlist.length) {
          //   this.playlist = this.perosnalized
          // }
          // console.log(' this.playlist: ', this.playlist)
        })
        .catch(err => {
          this.loadingErr = true
          console.log('个性化 加载失败')
        })
        .finally(() => {
          this.loading = false
        })
    },
    click(music) {
      this.$store.dispatch('playPlaylist', music.id)
    }
  }
}
</script>

<style lang="scss">
</style>